<template>
  <div id="test">
    <transition appear appear-active-class="fadeInY">
      <div class="PCblogOpt">
        <div class="target" :style="{backgroundColor:chooseColor(way)}">{{way}}</div>
        <div class="header">
         <span class="time"> <i class="iconfont iconshijian00" :style="fontSize='15px'"></i>{{time | format }}</span>
          <span class="see">
            <i class="iconfont iconyanjing" style="color:#5183e6"></i>
            <span style="color:#5183e6">{{seeNum}}</span>
          </span>
          
        </div>
        <div class="content" @click="GoDetailBlog">
          <div class="title">
          <h3>{{title}}</h3>

          </div>
          <div class="simpleContent">{{innerText}}</div>
          <!-- <hr /> -->
          <!-- <div style="width:100%;height:1px;background-color:#ebf2f6"></div> -->
        </div>
        <!-- <footerblog :way="way" :id="id" class="footer"></footerblog> -->
        <!-- <div class="BGImg" :style="{'backgroundImage':'url('+BGImg+')'}"></div> -->
        <!-- <div class="BGImg"></div> -->
      </div>
    </transition>
  </div>
</template>

<script>
import { state } from "../../store.js";
import { formatTime } from "../../formatTime";
import footerblog from "../index/footer";
import Bus from "../../bus";
export default {
  props: [
    "title",
    "time",
    "img",
    "content",
    "seeNum",
    "way",
    "id",
    "index",
  ],
  components: {
    footerblog,
  },
  data() {
    return {
      flag:true,
      // isPC: false,
      thinks: false,
      blogGoodNum: 0,
      blogCollectNum:0
      // BGImg:""
    };
  },
  filters: {
    format(val) {
      return formatTime(val);
    },
  },
  computed: {
    format() {
      return formatTime(this.time);
    },
    innerText(){
      let div = document.createElement("div")
      div.innerHTML = this.content
      return div.innerText
    },
    chooseColor(){
      return function(way){
        switch(way){
        case "全部" : return 'CA97FE99';
        case "vue" : return "#41B88399";
        case "react" : return "#82d7f799";
        case "node" : return "#026E0099";
        case "js" : return "#FDD30399";
        case "css" : return "#0170E699";
        case "其他" : return "#AB617399";
        case "随笔" : return "#6a6a6a99";
      }
      }
    },
  },
  created() {
    // this.ifCurrentBlogHasCollect()
    // this.ifCurrentBlogHasGood()
  },
  methods: {
    ifCurrentBlogHasCollect() {
      this.$axios
        .get("/collect/search", {
          params: {
            blogId: this.$route.params.id,
            username: this.$store.getters.user.username,
          },
        })
        .then((res) => {
          if (res.data.error === -1) {
            this.blogCollectNum = res.data.data.length
          } else {
            this.blogCollectNum = 0
          }
        });
    },
    ifCurrentBlogHasGood() {
      this.$axios
        .get("/history/search", {
          params: {
            blogId: this.$route.params.id,
            username: this.$store.getters.user.username,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.blogGoodNum = res.data.data.length
          } else {
            this.blogGoodNum = 0
          }
        });
    },
    GoDetailBlog() {

      this.$axios.post("/blog/seeNum",{
        id:this.id,
        seeNum:this.seeNum+1
      }).then(res=>{
        
      })
      this.$router.push("/detail/" + this.id);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../css/comment/animate.css");
#test {
  position: relative;
  z-index: 2;
}
.BGImg {
  position: absolute;
  z-index: -1;
  margin: 20px 25px;
  padding: 10px 0;
  right: -26px;
  top: -8%;
  border-radius: 15px;
  background-size: 100% 100%;
  width: 100%;
  height: 150px;
  opacity: 0.3;
  // border: 1px solid rgba(255, 255, 255, 0.8);
}
.PCblogOpt {
  box-sizing: border-box;
  padding: 12px 0;
  // border-radius: 15px;
  height: 100px;
  margin: 20px 25px;
  // border: 3px solid white;
  transition: all 0.3s 0.05s;
  position: relative;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  .target{
    width: 80px;
    height: 20px;
    color: #33333388;
    position: absolute;
    top: 8px;
    right: -20px;
    text-align: center;
    transform: rotate(45deg);
    font-size: 13px;
    line-height: 20px;
  }
  .header {
    padding-left: 15px;
    display: flex;
    font-size: 12px;
    justify-content: flex-start;
    color: #333;
    font-weight: 100;
    font-family: veria Sans Libre, Fantasy;
    .time {
      color: rgba(3, 3, 3, 0.4);
      margin-right: 20px;
      i {
    vertical-align: middle;
        margin-right: 5px;
        font-size: 12px;
        // color: #777777;
      }
    }
    .see {
      color: rgba(3, 3, 3, 0.4);
      i {
        margin-right: 5px;
        font-size: 12px;
        // color: #333;
      }
    }
    .collect{
      i {
        margin-right: 5px;
        font-size: 15px;
        color: #f5de19;
      }
    }
    .good {
      i {
        margin-right: 5px;
        font-size: 15px;
        color: #fb7299;
      }
    }
  }
  .content {
    text-align: left;
    height: 79%;
    margin-top: 8px;
    padding-left: 15px;
    overflow: hidden;
    border-bottom: 1px solid #777777;
    .simpleContent {
      text-align: left;
      font-size: 14px;
      height: 66%;
      // padding-left: 5px;
      margin-top: 10px;
      white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      color: rgba(0, 0, 0);
      font-weight: 300;
      color: #666666;
    }
    h1 {
      width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      transition: all 0.5s;
    cursor: url("../../assets/img/cur/mais.png"), default;

      font-weight: 200;
      &:hover {
        color: red;
        transform: translateX(-50px);
      }
    }
  }
  .img {
    margin-left: 30px;
    img {
      background-color: cyan;
      margin-top: 15px;
      border-radius: 15px;
      height: 200px;
      width: 200px;
    }
  }
  &:hover {
    // transform: translateY(-20px);
    transform: scale(1.02);

    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
  }
}
.thinks-leave-active {
  animation: fade 0.3s linear;
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-50px);
  }
}

@media screen and (max-width: 765px) {
  .PCblogOpt {
    padding: 20px 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    height: 250px;
    margin: 20px 25px;
    // border: 1px solid white;
    transition: all 0.5s;

    .content {
      h1{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .simpleContent {
        text-align: left;
        font-size: 17px;
        // width: 100%;
        height: 55%;
        overflow: hidden;
      }
    }
    .header {
      display: block;
      .time {
        display: block;
      }
      .good {
        margin-left: 5%;
      }
      .thinks {
        position: absolute;
        right: 22px;
      }
    }
  }
  .thinks-leave-active {
    animation: fade 0.3s linear;
  }
  @keyframes fade {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(-50px);
    }
  }
}
@media screen and (max-width: 765px) {
  .BGImg {
    width: 100%;
    height: 272px;
    background-size: 100% 100%;
    margin: 20px 60px;
    padding: 10px 0;
    opacity: 0.3;
    right: -61px;
  }
}
</style>